<template>
  <div class="search-container">
    <!-- 顶部搜索栏 -->
     <form class="search-form" action="/">
       <van-search 
       v-model="searchText" 
       show-action 
       placeholder="请输入搜索关键词" 
       background="#3296fa" 
       @search="onSearch"
       @cancel="onCancel" 
       @focus="isResultShow = false"
       />
     </form>


     <!-- 搜索栏 -->


     <!-- 搜索结果 -->
     <search-result 
     v-if="isResultShow" 
     :search-text="searchText" 
     />
     <!-- /搜索结果 -->


    <!-- 联想建议 -->
    <search-suggestion 
    v-else-if = "searchText" 
    :search-text = "searchText"
    @search="onSearch"
    />
    <!-- /联想建议 -->

     <!-- 历史记录 -->
     <search-history 
     v-else 
     :search-histories="searchHistories" />
     <!-- /历史记录 -->

  </div>
</template>

<script>
    import SearchHistory from './components/search-history'
    import SearchSuggestion from './components/search-suggestion'
    import SearchResult from './components/search-result'
  export default {
    name: "SearchIndex",
    components: {
        SearchHistory,
        SearchSuggestion,
        SearchResult
    },
    props: {},
    data() {
      return {
        searchText: '',
        isResultShow: false,
        searchHistories: []  // 搜索的历史数据历史
      };
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
        onSearch (val) {
          // 更新文本框内容
          this.searchText = val

          // 存储搜索历史记录
          // 要求不要有重复历史记录,最新的排在最前面
           const index = this.searchHistories.indexOf(val)
              if(index === 1) {
                this.searchHistories.splice(index, 1)
              }
              this.isResultShow = true

          // 渲染搜索结果
          this.isResultShow = true
        },
        onCancel () {
            this.$router.back()
        }
    }
  };
</script>

<style scoped lang='less'>
  .search-container {
    .van-search__action {
      color: #fff;
    }
  }
  .search-container {
    padding-top: 108px;
    .van-search__action {
        color: #fff;
    }
    .search-form {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
  }
</style>